@charset "utf-8";

main {
    overflow-y: scroll;

    // 数据显示
    .run-title {
        padding: 15px 20px;
        height: 100px;

        .run-data {
            color: #333;

            span {
                font-size: 48px;

                color: #4294ff;
            }
        }
    }

    // 地图
    .map {
        height: 100%;
    }

    // 开始按钮
    .go-btn {
        position: fixed;
        top: 50%;
        left: 50%;

        border-radius: 50%;
        width: 150px;
        height: 150px;

        font: bold 90px/150px "微软雅黑";
        text-align: center;

        color: #e2f5ff;
        background-color: rgba(66, 148, 255, .7);

        transform: translate(-50%, -50%);
    }
}

// 蒙层
.masks {
    display: none;

    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-color: #59b2db;

    .data-cont {
        margin: 0 auto;
        padding: 20px;
        min-width: 320px;
        max-width: 1000px;
        height: 100%;

        color: #fff;
    }
}

@keyframes myfirst {
    0% {
        background-color: #77b0fb;
    }

    40% {
        background-color: orange;
    }

    60% {
        background-color: green;
    }

    100% {
        background-color: #59b2db;
    }
}

// 倒计时蒙层
.mask-time {
    display: none;

    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-color: #59b2db;

    animation: myfirst 5s;

    .time-num {
        position: fixed;
        top: 50%;
        left: 50%;

        width: 150px;
        height: 100px;

        font-size: 100px;
        font-weight: bold;
        line-height: 100px;
        text-align: center;

        color: #fff;

        transform: translate(-50%, -50%);
    }
}

// 运动中数据蒙层
.mask-data {
    display: none;

    .mask-data-cont {
        display: flex;

        flex-direction: column;
        justify-content: space-between;
    }

    // 标题
    .run-category {
        color: #aad9f7;
    }

    .run-statu {
        font: normal 22px/32px "微软雅黑";
    }

    // 公里数
    .run-mile {
        font-size: 20px;
        text-align: center;

        .mile-data {
            font-size: 100px;
        }
    }

    // GPS
    .location {
        font-size: 14px;

        justify-content: space-between;
        align-items: center;

        .gps-text {
            color: #acdfff;
        }

        .icon-run-location {
            font-size: 40px;
        }
    }

    // 速度时间千卡
    .data-info {
        justify-content: space-between;

        .info-item {
            text-align: center;

            p {
                margin-top: 15px;
                margin-bottom: 20px;

                color: #aad9f7;
            }

            span {
                font-size: 30px;
            }
        }
    }

    // 按钮
    .data-btns {
        justify-content: space-around;

        div {
            border-radius: 50%;
            width: 120px;
            height: 120px;

            text-align: center;

            .iconfont {
                font-size: 36px;
            }
        }

        .pause-btn {
            display: flex;

            color: #59b2db;
            background-color: #fff;

            flex-direction: column;
            justify-content: center;
        }

        .continue-btn {
            display: none;

            background-color: #79f0c2;

            flex-direction: column;
            justify-content: center;
        }

        .stop-btn {
            display: none;

            background-color: #ff6060;

            flex-direction: column;
            justify-content: center;
        }
    }
}

// 地图模式蒙层
.mask-map {
    // 返回按钮
    .map-back {
        border: 1px solid #bbb;
        border-radius: 50%;
        width: 40px;
        height: 40px;

        text-align: center;

        color: #101010;
        background-color: #fff;

        box-shadow: 0 0 6px 0 rgba(0, 0, 0, .4);

        .icon-train-detail-back {
            font: normal 30px/40px "微软雅黑";
        }
    }

    // 结束按钮
    .map-finish {
        border: 1px solid #bbb;
        border-radius: 10px;
        width: 65px;
        height: 40px;

        text-align: center;

        color: #101010;
        background-color: #fff;

        box-shadow: 0 0 6px 0 rgba(0, 0, 0, .4);

        span {
            font: normal 20px/40px "微软雅黑";
        }
    }

    // 数据框
    .mask-map-cont {
        position: relative;

        // 定位
        .map-text {
            position: absolute;
            bottom: 70px;
            left: 0;

            padding: 0 20px;
            width: 100%;
            height: 140px;
        }

        .map-mode {
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;

            width: 100%;
            height: 100%;
        }
    }

    .map-text-cont {
        border-radius: 10px;
        padding: 10px 20px;
        width: 100%;
        height: 100%;

        color: #101010;
        background-color: #fff;

        box-shadow: 0 0 6px 0 rgba(0, 0, 0, .4);

        .map-data {
            justify-content: space-between;
        }

        h3 {
            border-bottom: 2px dashed #bbb;

            font: bold 18px/30px "微软雅黑";

            color: #4294ff;

            .run-km {
                margin-left: 20px;

                color: #101010;
            }

            .now-date {
                float: right;

                font: normal 16px/30px "微软雅黑";

                color: #8dcef7;
            }
        }

        .map-item {
            padding: 15px 0;

            font-size: 14px;
            text-align: center;

            // 数值
            span {
                font: normal 25px/50px "微软雅黑";
            }
        }
    }
}
